<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20以内</title>
</head>
<body>
    <table id ="table" >
    </table>
</body>
<script>
    function getMethods(){
        var randomInt = Math.floor(Math.random()*2)
        let methodArr = ["+","-"]
        return methodArr[randomInt]
    }

    function getRandom(){
        var randomInt = Math.floor(Math.random()*20)
        return randomInt
    }

    function getTd(){
        var tdStr = "";
        for(var i=1;i<9;i++){
            let one = getRandom()
            let two = getRandom()
            let getMethod = getMethods()
            if(getMethod == "+"){
                if(one + two > 20){
                    return getTd()
                }
            }
            if(getMethod == "-"){
                if(one - two < 0){
                    return getTd()
                }
            }
            tdStr += "<td style='border: 1px solid' width='80px' height='30px'>"+one+getMethod+two+"=</td>"
        }
        return tdStr;
    }

    function getTr(){
        var trStr = "";
        for(var i=1;i<29;i++){
            trStr += "<tr>"+getTd()+"</tr>"
        }
        return trStr;
    }


    console.log(getTr())
     
    document.getElementById("table").innerHTML = getTr()

</script>
</html>